{extend name="base/common"}

{block name="style"}
<link rel="stylesheet" href="/admin/css/chosen/chosen.css">
<style>
    .note{
        margin-left: 10px;
        color: red;
    }
    .a{
        background:#f1f1f1;
        border-color: #1ab394;
        color: #FFFFFF;
        display: inline-block;
        padding: 6px 12px;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        margin-bottom: 5px;
        color:#000000;
    }
</style>
{/block}

{block name="page-header"}
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>推送管理</h2>
    </div>
    <div class="col-lg-2">

    </div>
</div>
{/block}

{block name="main"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>推送列表</h5>
                    <div class="ibox-tools">
                        <a data-toggle="modal" class="btn btn-primary s" href="#modal-form">添加推送</a>
                        <div id="modal-form" class="modal fade" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-body">
                                        <form class="form-horizontal" id="form" method="post" action="{:Url('Push/push')}">
                                            <p class="tt">消息推送(每天只可推送一次)</p>
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-lg-2 col-sm-2 no-padding text-right" style="text-align:center;line-height:30px;margin-bottom: 10px">
                                                        <label>主图文:</label>
                                                    </div>
                                                    <div class="col-lg-10 col-sm-10 sel" style="padding-right:35px;">
                                                        <select class="form-control chosen-select" name="focus_main" id="main">
                                                            <option value="-1" >--请选择--</option>
                                                            {notempty name = "regulation"}
                                                            <option disabled="select">--村规民约--</option>
                                                            {volist name="regulation" id="vo"}
                                                            <option value="{$vo.id}" type="regulation">{$vo.title}</option>
                                                            {/volist}
                                                            {/notempty}

                                                            {notempty name = "party"}
                                                            <option disabled="select">--党务公开--</option>
                                                            {volist name="party" id="vo"}
                                                            <option value="{$vo.id}" type="party">{$vo.title}</option>
                                                            {/volist}
                                                            {/notempty}

                                                            {notempty name = "country"}
                                                            <option disabled="select">--美丽乡村--</option>
                                                            {volist name="country" id="vo"}
                                                            <option value="{$vo.id}" type="country">{$vo.title}</option>
                                                            {/volist}
                                                            {/notempty}
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="row" id="vice">
                                                    <div class="col-lg-2 col-sm-2 no-padding text-right" style="text-align:center;line-height:30px;margin-bottom: 10px">
                                                        <label>副图文:</label>
                                                    </div>
                                                    <div class="col-lg-10 col-sm-10 sel vice" style="padding-right:35px;">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-lg-offset-2 col-lg-10">
                                                    <button class="btn btn-primary post-put" type="button" target-form="form-horizontal">发送</button>
                                                    <button class="a" type="button" style="display: none">发送</button>
                                                    <span class="note">（* 点击直接发送至频道）</span>
                                                </div>
                                            </div>
                                            <input type="hidden" name="id" value="">
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th><input class="i-checks check-all" type="checkbox"></th>
                                <th>ID</th>
                                <th>主图文信息</th>
                                <th>推送人</th>
                                <th>推送时间</th>
                                <th>状态</th>
                            </tr>
                            </thead>
                            <tbody>
                            {volist name="info" id="vo"}
                            <tr>
                                <td><input type="checkbox" class="i-checks" name="input[]"></td>
                                <td>{$vo.id}</td>
                                <td>{$vo.title}</td>
                                <td>{$vo->user->nickname}</td>
                                <td>{$vo.push_time|time_format}</td>
                                <td>{$vo.status_text}</td>
                            </tr>
                            {/volist}
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="10">
                                    <div class="page"></div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="/admin/js/plugins/iCheck/icheck.min.js"></script>
<script src="/admin/js/chosen.jquery.js"></script>
<script>
    $(function(){
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green'
        });

    });  
    //点击主图文传递数据,并显示副图文
    $("#vice").hide();
    $("select[name='focus_main']").on("change",function () {
    	var type = $("#main").find("option:selected").attr("type");
        var id = $("select[name='focus_main']").val();
        if(id == -1){
            $("#vice").hide();
        }else{
            $("#vice").show();
        }

        $.ajax({
            type:"post",
            url:"{:Url('Push/index')}",
            data:{
            	id:id,
            	type:type,
            },
            success:function(data){
                var html = "";
                var regulation = data.msg.regulation;
                var party = data.msg.party;
                var country = data.msg.country;
                var rlen = regulation.length;
                var plen = party.length;
                var clen = country.length;
                $('.vice' ).empty();
                html += '<select class="chosen-select form-control" data-placeholder="--请选择--" name="focus_vice" id="vice" multiple>';
                if(rlen !== 0){
                	html += '<option disabled="select">--村规民约--</option>';
                	for(var i = 0; i < rlen; i++ ){
                    var t1 = regulation[i];
                    html += '<option value="'+ t1.id +'" type="regulation">'+ t1.title +'</option>';
                	}	
                }
                
                 if(plen !== 0){
                	html += '<option disabled="select">--党务公开--</option>';	
                	for(var i = 0; i < plen; i++ ){
                    var t2 = party[i];
                    html += '<option value="'+ t2.id +'" type="party">'+ t2.title +'</option>';
                	}
                }
                
                 if(clen !== 0){
                	html += '<option disabled="select">--美丽乡村--</option>';
                	for(var i = 0; i < clen; i++ ){
                    var t3 = country[i];
                    html += '<option value="'+ t3.id +'" type="country">'+ t3.title +'</option>';
                	}	
                }
                html += '</select>';
                $('.vice' ).append(html);
                $(".vice select" ).chosen({
                    no_results_text: "没有找到该选项",
                    allow_single_de: true,
                    width:'100%',
                    max_selected_options:'5'
                });
            }
        });
    });

    //多选框
    $(".sel select" ).chosen({
        no_results_text: "没有找到该选项",
        allow_single_de: true,
        width:'100%',
        max_selected_options:'5'
    });
    selHeight($('.sel select'));
    function selHeight(e){
        e.find('ul').on('click',function(){
            var results = $(this ).next().find('.chosen-results' );
            var h= results.height();
            h=h-100;
            $('.selblo' ).animate({'height':h+'px'},100);
            //切出页面
            var hiddenProperty = 'hidden' in document ? 'hidden' :
                'webkitHidden' in document ? 'webkitHidden' :
                    null;
            var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
            var onVisibilityChange = function(){
                if (!document[hiddenProperty]) {
                    //selgp.find('.search-field').find('input').on('blur');
                }else{
                    e.find('.search-field').find('input').off('blur');
                }
            };
            $(document).on(visibilityChangeEvent, onVisibilityChange);
        });
        e.find('.search-field').find('input').on('blur',function(){
            setTimeout(function(){
                $('.selblo' ).animate({'height':'0'});
            },100)
        });
    }
    if($("select[name='focus_main']").val()==-1){
        $(".post-put").show();
        $(".a").hide();
    }
    $(".s").click(function(){
        $(".post-put").show();
        $(".a").hide()
    });
    $(".post-put").off('click').on("click",function(){
        var it=$(this);
        var len = $("select[name='focus_vice']").find("option:selected").length;
        var type = [];
        for(var i=0;i<len;i++){
        	type.push($("select[name='focus_vice']").find("option:selected").eq(i).attr("type"))
        }
        var data = {
//            type: $("input[name='type']:checked" ).val(),
            focus_main: $("select[name='focus_main']").val(),
            main_type : $("#main").find("option:selected").attr("type"),
            focus_vice: $("select[name='focus_vice']").val(),
            vice_type:type
        };

        if($("select[name='focus_main']").val()!=-1){
            $(this).hide();
            $(".a").show();

        }
        $.ajax({
            type:"post",
            url:$("#form").attr("action"),
            data:data,
            success:function(data){

                if(data.code == 1){
                    if (data.url) {
                        updateAlert(data.msg + ' 页面即将自动跳转~','success');
                    }else{
                        updateAlert(data.msg ,'success');
                    }
                    it.prop('disabled','true');
                    $('input,select').prop('disabled','true');
                    setTimeout(function(){
                        if (data.url) {
                            location.href=data.url;
                        } else {
                            location.reload();
                        }
                        it.removeAttr('disabled');
                        $('input,select').removeAttr('disabled');
                    },2000);
                } else {
                    updateAlert(data.msg, 'error');
                    it.attr('disabled','true');
                    $('input,select').prop('disabled','true');
                    setTimeout(function(){
                        it.removeAttr('disabled');
                        $('input,select').removeAttr('disabled');
                    },2000);
                }
            }
        });
        return false;
    });

</script>
{/block}